export const optConfig = {
  animation: false,
  //   backgroundColor: '#d4f087', // 整个容器的背景色
  //   backgroundColor: 'transparent', // 整个容器的背景色
  grid: {
    right: 60, // Y轴距离容器的距离
    bottom: 30, // X轴距离容器的距离
    left: 60,
    top: 50,
    show: true
    // backgroundColor: '#c0c0c0'
    // containLabel: true// 这个不能打开，打开之后，lable的宽度就会根据字的长度，自适应宽度，滚轮，就会出现动来动去
    // width: 723,
    // height: 560
    //   borderColor: 'transparent',
  },
  tooltip: {
    showDelay: 0,
    formatter: function (params) {
      if (params.componentType !== 'markLine') {
        // console.log('hover悬浮的时候，展示的数字：', params);
        const s0 = `1 缺陷ID：  ${params.data['uid']}`;
        const s2 = `2 缺陷flawType：  ${params.data['flawType']}`;
        const s1 = `3 缺陷名称：  ${params.data['name']}`;
        const s3 = `4 缺陷symbol：${params.data['icon']}`;
        const s4 = `5 缺陷坐标：  [${params.data['value']}]`;
        const showContent = s0 + '<br/>' + s1 + '<br/>' + s2 + '<br/>' + s3 + '<br/>' + s4;
        return showContent;
      } else {
        return '片的位置';
      }
    },
    // 鼠标放上面，，XY轴的交叉线，
    // axisPointer: {
    //   show: true,
    //   type: 'cross',
    //   lineStyle: {
    //     type: 'dashed',
    //     width: 1
    //   }
    // }
  },
  legend: {
    data: []
  },
  xAxis: [
    {
      type: 'value',
      scale: true,
      axisLabel: {
        showMaxLabel: true,
        formatter: function (value, index) {
          // console.log('Y轴的刻度:', value, index);
          if (index % 4 == 0 || value / optConfig.xAxis[0].max == 1) {
            return Number(value).toFixed(0) + 'mm';
          } else {
            return '';
          }
        },
        // width:80
        rotate: 30, // 字体的倾斜角度
        fontSize: 10
      },
      splitLine: {
        // show: true // 一列X轴刻度一条线
        show: false
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        symbol: ['none', 'arrow'],
        symbolSize: [8, 8],
        lineStyle: {
          //   color: 'red', // 坐标轴线线的颜色
          color: 'black',
          width: '1', // 坐标轴线线宽
          type: 'solid' // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        }
      },
      splitNumber: 50, // X轴分配19等分
      min: 0,
      max: 2500,
      show: true,
      position: 'top'
      //    inverse: true, // Y轴反向轴
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      inverse: true, // Y轴反向轴
      //   position: 'right',
      axisLabel: {
        showMaxLabel: true,
        formatter: function (value, index) {
          if (index % 2 == 0 || value / optConfig.yAxis[0].max == 1) {
            return Number(value).toFixed(0) + 'm';
          } else {
            return '';
          }
        },
        fontSize: 10
        // width:50
        // rotate: 45 // 字体的倾斜角度
      },
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        symbol: ['arrow', 'none'],
        symbolSize: [8, 8],
        lineStyle: {
          //   color: 'green', // 坐标轴线线的颜色
          color: 'black', // 坐标轴线线的颜色
          width: '1', // 坐标轴线线宽
          type: 'solid' // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        }
      },
      splitLine: {
        // show: true // 一行刻度，一条线
        show: false
      },
      splitNumber: 60, // Y轴分配30等分
      min: 0,
      max: 3000,
    //   alignTicks: true,
    },
    {
        //二维码轴
        type: 'value',
        scale: true,
        inverse: true, // Y轴反向轴
        position: 'right',
        axisLabel: {
          showMaxLabel: true,
          formatter: function (value, index) {
           return Number(value).toFixed(0) + 'm';
            // if (index % 2 == 0 || value / optConfig.yAxis[1].max == 1) {
            //   return Number(value).toFixed(0) + 'm';
            // } else {
            //   return '';
            // }
          },
          fontSize: 10,
          alignTicks: true,
          // width:50
          // rotate: 45 // 字体的倾斜角度
        },
        axisLine: {
          show: true, // 是否显示坐标轴轴线
          symbol: ['arrow', 'none'],
          symbolSize: [8, 8],
          lineStyle: {
            //   color: 'green', // 坐标轴线线的颜色
            color: 'black', // 坐标轴线线的颜色
            width: '1', // 坐标轴线线宽
            type: 'solid' // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          }
        },
        splitLine: {
          // show: true // 一行刻度，一条线
          show: false
        },
        splitNumber: 30, // Y轴分配30等分
        // interval: 60, //设置数据间隔
        min: 0,
        max: 3000
      }
  ],
  series: [
    {
      type: 'scatter',
      cursor: 'pointer',
      label: {
        // 只在shape = 8 时候启用
        show: true,
        // 颜色跟传递来的颜色保持一致
        // color: "transparent",
        formatter(params) {
          // console.log('如果symboy不存在，就不显示呗，icon', params);
          return params.data?.icon;
        },
        fontWeight: 'bolder',
        // backgroundColor: 'red',//TODO:------背景高亮-----
        fontSize: 12 // 其实是symbol的大小
        //   fontSize: 18
      },
      // symbol: svg[26]// 不用这个属性了，不是画出来的图形
      itemStyle: {
        color: 'rgba(255, 255, 255, 0)' // 设置白景色透明 -- 字母
      },
      data: []
    },
    {
      name: '',
      type: 'line',
      markLine: {
        animation: true,
        label: {
          formatter: '',
          align: 'center',
          fontStyle: {
            color: 'r#fff'
          }
        },
        lineStyle: {
          type: 'solid',
          color: 'red'
        },
        data: [
          [
            {
              coord: [-10, -10]
            },
            {
              coord: [-10, -10]
              // symbol: 'none',
            }
          ]
        ]
      }
    },
    {
        //二维码坐标系暂时不考虑数据的对应，只是单独一个坐标轴
        name: '二维码坐标系',
        type: 'line',
        yAxisIndex: 1,
        data: []
      }
  ],
  dataZoom: [
    // {
    //   orient: 'horizontal',
    //   show: true, //控制滚动条显示隐藏
    //   realtime: true, //拖动滚动条时是否动态的更新图表数据
    //   height: 20, //滚动条高度
    //   start: 0, //滚动条开始位置（共100等份）
    //   end: 2500, //滚动条结束位置,
    //   handleSize: '100%',
    //   showDataShadow: false,//false去除滚轮中间那条线
    //   backgroundColor:"rgb(245,247,252)",
    //   borderColor:"transparent",//滚动条边框颜色
    //   fillerColor: "rgba(61,126,255, 0.1)",
    // //   startValue: 0, // 从头开始。最开始可视Y轴范围的区间
    // //   endValue: 100, // 一次性展示5个
    // },
    // {
    //   type: 'inside',
    //   brushSelect: false ,
    //   xAxisIndex: [0],
    //   show: false,
    // },
    // {
    //   orient: 'vertical',
    //   show: true, //控制滚动条显示隐藏
    //   realtime: true, //拖动滚动条时是否动态的更新图表数据
    //   //   height: 300, //滚动条高度
    //   start: 0, //滚动条开始位置（共100等份）
    //   end: 3000, //滚动条结束位置
    //   width: 5,
    //   handleSize: '100%'
    // },
    // {
    //   type: 'inside',
    //   yAxisIndex: 0,
    //   brushSelect: false ,
    //   show: false,
    //   zoomOnMouseWheel: true, //滚轮是否触发缩放
    //   moveOnMouseMove: true, //鼠标滚轮触发滚动
    //   moveOnMouseWheel: true
    //   //   moveOnMouseMove:false,  //鼠标滚轮触发滚动
    //   // moveOnMouseWheel:false
    // }
    // -----x轴--不显示滚动条--直接滚轮放大和缩小
    {
      type: 'inside', // 内嵌入图标中
      startValue: 0, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
      endValue: 25000, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
      filterMode: 'filter'
      // /**
      //   不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
      //   默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
      //   如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
      //   */
      // xAxisIndex: [0],
      // yAxisIndex: [0]
    },
    {
      type: 'inside', // 内嵌入图标中
      orient: 'vertical'
    }
  ]
};
